import {Node} from '@antv/x6'
import {Graph} from '@antv/x6'
import svg from './svg/与门.svg'


Graph.registerNode(
  'AndGate',
  {
    inherit: 'image',
    width: 80,
    height: 80,
    markup: [
      // {
      //   tagName: 'rect', // 标签名称
      //   selector: 'body', // 选择器
      // },
      {
        tagName: 'image',
        selector: 'img',
      },
      {
        tagName: 'text',
        selector: 'label',
      },
    ],
    attrs: {
      // body: {
      //   stroke: '#8f8f8f',
      //   strokeWidth: 1,
      //   fill: '#fff',
      //   rx: 6,
      //   ry: 6,
      // },
      img: {
        xlinkHref:svg,
        width: 80,
        height: 80,
        x: 0,
        y: 0,
      },
    },
    // connectionPoint:{
    //   name:'boundary',
    //   args:{
    //     offset:100,
    //     // stroked:true
    //   }
    // },
    ports: {
      groups: {
        port1:{
          // marup:{tagNmae:'circle'},
          // zIndex:1,
          position:{
            name:"top",
            args:{
              // start:{x:60,y:0},
              // end:{x:20,y:26},
              // dx:10,
              dy:14,
              // angle:10,
              // x:40,
              // y:40
            }
          },
          attrs:{
            circle:{
              magnet:true,
              stroke:'#8f8f8f',
              r:5,
              style: {
                visibility: 'hidden'
              }
            }
          }
        },
        // port1:{
        //   position:{
        //     name:"absolute",
        //     args:{
        //       x:40,
        //       y:12
        //       // dy:14,
        //     }
        //   },
        //   attrs:{
        //     circle:{
        //       magnet:true,
        //       stroke:'#8f8f8f',
        //       r:5,
        //       style: {
        //         visibility: 'hidden'
        //       }
        //     }
        //   }
        // },
        port2:{
          position:{
            name:"bottom",
            args:{
              dx:-16,
              dy:-12,
              // x:-20,
              // y:40,
            }
          },
          attrs:{
            circle:{
              magnet:true,
              stroke:'#8f8f8f',
              r:5,
              style: {
                visibility: 'hidden'
              }
            }
          }
        },
        port3:{
          position:{
            name:"bottom",
            args:{
              dx:0,
              dy:-12,
            }
          },
          attrs:{
            circle:{
              magnet:true,
              stroke:'#8f8f8f',
              r:5,
              style: {
                visibility: 'hidden'
              }
            }
          }
        },
        port4:{
          position:{
            name:"bottom",
            args:{
              // x:'80%',
              // y:0,
              dx:16,
              dy:-12
            }
          },
          attrs:{
            circle:{
              magnet:true,
              stroke:'#8f8f8f',
              r:5,
              style: {
                visibility: 'hidden'
              }
            }
          }
        },
      },
    },
    //   对接后端增加字段
    basicNodeId: "1e7f82b29f70874275679cbea32c08b6",
    name: "与门",
  },
  true,


)





/**数据库节点 */
export const AndGate: Node.Metadata = {
  shape: 'AndGate',   //对应上面注册的 name
  attrs: {
    // body: {
    //   refPoints: '10,0 40,0 30,20 0,20'
    // },

  },
  // connectionPoint:{
  //   name:'boundary',
  //   args:{
  //     offset:100,
  //     // stroked:true
  //   }
  // },
  connecting: {
    // connectionPoint: 'anchor',
    connectionPoint:{
      name:'boundary',
      args:{
        offset:120
      }
    },
  },
  ports: {
    items: [
      {
        id: 'port_1',
        group: 'port1',
      },
      {
        id: 'port_2',
        group: 'port2',
      },
      {
        id: 'port_3',
        group: 'port3',
      },
      {
        id: 'port_4',
        group: 'port4',
      },
    ],
  },
}
